<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1. 区别1    产生实际不一样
        * 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时，
        * 全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建
        2. 区别2
            * 作用域是静态的，只要函数定义好了就一直存在，且不会再变化
            * 上下文环境是动态的，调用函数时创建的，函数调用结束时上下文环境就会被释放
        3. 联系
         * 上下文环境（对象）是从属于所在的作用域 
         * 全局上下文环境===> 全局作用域
         * 函数上下文环境==> 对应的函数使用域-->
    <script>
        var a = 10;
        b = 20;

        function fn(x) {
            var a = 100
            c = 300
            console.log('fn()', a, b, c, x);

            function bar(x) {
                var a = 10000
                d = 400
                console.log('bar()', a, b, c, d, x);
            }
            bar(100)
            bar(200)
        }
        fn(10)
    </script>
</body>

</html>